window.onload = function () {
    // 1.先做点击左右 完成无缝轮播图
    // 1.1 获取左边按钮
    var prevBtn = document.querySelector('.prev');
    // 1.2 获取右边按钮
    var nextBtn = document.querySelector('.next');
    // 1.3 获取view
    var oView = document.querySelector('.view');
    // 1.4 获取view的宽度
    var viewWidth = oView.offsetWidth;
    // 1.5 获取ul
    var oUl = document.querySelector('.view ul');

    // 2.做有小点导航的轮播图(一定要在 第一个li被插入到ul之前去创建小点导航)
    // 2.1 先创建一个ol标签 createElement('ol');
    var oOl = document.createElement('ol');
    // 2.2 把ol标签添加到view的里面的后面 oView.appendChild(ol);
    oView.appendChild(oOl);
    // 2.3 遍历 ul中的所有子元素(oUl.children) -- 6个
    for (var i = 0; i < oUl.children.length; i++) {
        // 2.4 在ol中创建6个小点
        var li = document.createElement('li');
        console.log(li)
        // // 2.5 把1 2 3 4 5 6 写到li中去
        // li.innerHTML = i + 1;
        // 2.6 给每个li设置一个index 这个自定义属性
        li.setAttribute('index', i);
        // 2.7  小点插入到ol中去
        oOl.appendChild(li);


    }
    // 2.8选中第一个li
    oOl.children[0].className = 'active';

    // 1.6 找到第一个li 添加到ul中的最后
    var firstLi = document.querySelector('.view ul li:first-child');
    console.log(firstLi)
    // firstLi.cloneNode(true)  true就是把自己里面的所有东西(包括子元素)都复制  false 只复制自己
    oUl.appendChild(firstLi.cloneNode(true)); //如果你自己懒得做 自己手动写进去一个
    // 1.7 先克隆完了之后 再去获取所有li
    var aLi = document.querySelectorAll('.view ul li');
    console.log(aLi)
    var num = 0;

    var timeId = setInterval(f1, 3000);

    oView.onmouseover = function () {
        clearInterval(timeId);
    }

    oView.onmouseout = function () {
        timeId = setInterval(f1, 3000);
    }


    // // 鼠标点击下标移动
    var olLis = document.querySelectorAll('ol li');
    // 1.2 遍历ol中的所有的li
    for (var i = 0; i < olLis.length; i++) {
        // 1.6 给ol中每个li身上添加一个index属性 值为索引
        olLis[i].setAttribute('index', i);
        // 1.3 给ol中的每个li添加mouseover事件
        olLis[i].onclick = function () {
            num = i;
            // 1.4 遍历ol中的每个li 移除每个li上的class属性
            for (var j = 0; j < olLis.length; j++) {
                olLis[j].removeAttribute('class');
            }
            // 1.5 给当前鼠标移入的li添加一个className active
            this.className = 'active';
            // 1.7 获取鼠标移入的那个ol的li身上的index属性的值
            var index = this.getAttribute('index');
            num = index;
            // 1.8 给ul设置left值 往左 值为 index * 每个图片的宽度
            animate(oUl, -index * 1350)
        }
    }
    function f1() {
        // 1.8.1 判断是不是倒数第2个
        if (num == aLi.length - 1) {
            // 1.8.2 如果是 让num为0
            num = 0;
            // 1.8.3 让ul瞬间移动到0px位置
            oUl.style.left = 0 + 'px';
        }
        // 1.8.4 让num自增
        num++;
        // 1.8.5 随着num自增 ul也要移动
        animate(oUl, -num * viewWidth);
        // 2.12 判断一下 索引是不是 ool的索引-1,如果是
        if (num > oOl.children.length - 1) {
            // 2.13 如果是  让最后一个元素的class为空
            oOl.children[oOl.children.length - 1].className = '';
            // 2.14 让第一个class为active
            oOl.children[0].className = 'active'
        } else {
            // 2.9 找到所有的ool中的元素 遍历
            for (var j = 0; j < oOl.children.length; j++) {
                //  2.10 清除ool中所有li的class
                oOl.children[j].removeAttribute('class');
            }
            // 2.11 给索引为num的li添加class名字为active
            oOl.children[num].className = 'active';
        }
    }
    // 1.8 点击左边按钮
    nextBtn.onclick = f1;
    // 1.9 点击右边按钮
    prevBtn.onclick = function () {
        // 1.9.1 判断num是不是第一个
        if (num == 0) {
            // 1.9.2 如果是第一个  回到倒数第二个
            num = aLi.length - 1;
            // 1.9.3 让oul瞬间回到倒数第二个
            oUl.style.left = -num * viewWidth + 'px';
        }
        // 1.9.4 让num自减
        num--;
        // 1.9.5  随着num自减 ul也要移动
        animate(oUl, -num * viewWidth);

        // 2.9 找到所有的ool中的元素 遍历
        for (var j = 0; j < oOl.children.length; j++) {
            //  2.10 清除ool中所有li的class
            oOl.children[j].removeAttribute('class');
        }
        // 2.11 给索引为num的li添加class名字为active
        oOl.children[num].className = 'active';
    }
    

}

